﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>系统登录 - 班级管理系统</title>
    <link rel="stylesheet" href="~/css/reset.css" />
    <link rel="stylesheet" href="~/css/login.css" />
</head>
<body>
    <div class="container">
        <div class="login-wrapper">
            <div class="header">班级管理系统</div>
            <div class="form-wrapper">
                <input id="user" type="text" name="username" placeholder="username" class="input-item">
                <input id="mima" type="password" name="password" placeholder="password" class="input-item">
                <div id="passwordMatch"></div>
                <div class="div1">
                    <input type="submit" id="re" value="登录" class="btn1" onclick="login()" />
                    <input type="reset" value="重置" class="btn2" onclick="reset()" />
                </div>
            </div>
            <div class="msg">
                Don't have account?
                <a href="/Home/Signup">Sign up</a>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    function login() {
        var name = $("#user").val();
        var psw = $("#mima").val();
        $.post("/Home/Login", { username: name, password: psw }, function (data) 
        {
            if (data == "OK") 
            {
                window.location.href = "/Home/Index?username=" + name;
                // $.post("/Home/Index", { username: name }, function (data) 
                // {
                //     // if (data == "OK")
                //     window.location.href = "/Home/Index" + username;
                //  }
                // );
            }
            else 
            { 
                alert(data);
                $("#user").val('');
                $("#mima").val('');
            }
        }
        );
    }
    function reset() {
        $("#user").val('');
        $("#mima").val('');
        document.getElementById("passwordMatch").innerHTML = ""
    }
    document.getElementById("user").addEventListener("input", validatePassword);
    document.getElementById("mima").addEventListener("input", validatePassword);
    function validatePassword() {
        var user = document.getElementById("user").value;
        var password = document.getElementById("mima").value;
        if (user === "") {
            if (!document.getElementById("passwordMatch").innerHTML.includes("username is null.")) 
            {
                document.getElementById("passwordMatch").innerHTML=""
                document.getElementById("passwordMatch").innerHTML += "username is null.";
                document.getElementById("passwordMatch").style.color = "red"
            }
        } 
        else {
            if (document.getElementById("passwordMatch").innerHTML.includes("username is null.")) {
                document.getElementById("passwordMatch").innerHTML = document.getElementById("passwordMatch").innerHTML.replace(/username is null./g, "");
            }
        }
        if (password === "") {
            if (!document.getElementById("passwordMatch").innerHTML.includes("password is null."))
            {
                document.getElementById("passwordMatch").innerHTML += "password is null.";
                document.getElementById("passwordMatch").style.color = "red"          
            }
        }
        else {
            if (document.getElementById("passwordMatch").innerHTML.includes("password is null.")) {
            document.getElementById("passwordMatch").innerHTML=document.getElementById("passwordMatch").innerHTML.replace(/password is null./g, "");
            }
        }
        if (user === "" || password === "") {
            document.getElementById("re").disabled = true
            document.getElementById("re").style.background = "black"
            document.getElementById("re").style.color = "white"
        }
        else 
        {
            document.getElementById("re").disabled = false
            document.getElementById("re").style.background = "linear-gradient(to right,#a6c1ee, #fbc2eb)"
            document.getElementById("re").style.color = "black"
        }
    }
</script>